//获取dom元素
const form = document.querySelector('.add-form');
const tbody = document.querySelector('tbody');//获取表格元素
//省市县
const province = document.querySelector('[name=province]');//省
const city = document.querySelector('[name=city]');//市
const county = document.querySelector('[name=county]');//县

async function porVil(url, params, target, text) {
  const pcc = await axios({
    // url: "/geo/province"
    url, params
  });
  target.innerHTML = pcc.data.reduce((befor, item) => {
    return befor + `<option selected value="${item}">${item}</option>`
  }, ` <option selected value="">--${text}--</option>`);
  // county.innerHTML = county.firstChild.outerHTML;
  // target.value = ""
  // form.reset()
}


// 刷新页面 刷新表格
fuck()

// 拟态框的省市县联动
console.log();
document.querySelector('.header [type=button]').onclick = async () => {

  //开门重置表单
  await porVil("/geo/province", {}, province, "省")
  await porVil("/geo/city", { pname: province.value }, city, "市");
  await porVil("/geo/county", { pname: province.value, cname: city.value }, county, "县");

  //省份 输入框变化事件
  province.addEventListener('change', async function (e) {
    await porVil("/geo/city", { pname: province.value }, city, "市");
    await porVil("/geo/county", { pname: province.value, cname: city.value }, county, "县");
  });
  //市 输入框变化事件
  city.addEventListener('change', async function (e) {
    await porVil("/geo/county", { pname: province.value, cname: city.value }, county, "县");
  });
};

// 拟态框点击事件
// 重置表单
// const form = document.querySelector('form');
document.querySelector('[type=reset]').onclick = () => form.reset();

//确认添加事件=======================================
form.addEventListener('submit', async function (e) {
  e.preventDefault()// 删除 默认行为
  //点击提交按钮之后我们要执行什么
  // 1、收集表单信息
  const data = serialize(form, { harh: true, empty: true })//harh 返回对象类型，emty 空字段也会获取到属性名
  let id = data.id
  delete data.id
  // 2、验证表单是否为空
  for (const key in data) {
    if (!data[key]) {
      toastr.error("请你检查一下是否有空表单", "不得的喔")
      return
    }
  }

  //修改
  if (document.querySelector("#addModalLabel").innerText == "修改学员") {
    data.id = id
    // 2、提交表单信息
    const result = await axios({
      url: "/student/update",
      method: "put",
      data
    })
    // console.log(result);
    if (result.data.code == 0) {
      toastr.success(result.data.message, "棒")
      $("#addModal").modal("hide");
      // 刷新表格
      fuck()
      form.reset()
      document.querySelector("#addModalLabel").innerText = "录入新学员"
      // city.innerHTML = city.firstChild.outerHTML;
    }
    //=======================================
  } else {
    delete data.id
    // 2、提交表单信息
    const result = await axios({
      url: "/student/add",
      method: "post",
      data
    })
    // console.log(result);
    if (result.data.code == 0) {
      toastr.success(result.data.message, "棒")
      $("#addModal").modal("hide");
      // 刷新表格
      fuck()
      form.reset()
      document.querySelector("#addModalLabel").innerText = "录入新学员"
      // city.innerHTML = city.firstChild.outerHTML;
    }
  }

})

// 修改 弹窗 功能 
tbody.addEventListener('click', async function (e) {
  console.log(e.target);

  if (e.target.innerHTML == "修改") {
    //显示拟态框 
    $("#addModal").modal("show");
    document.querySelector("#addModalLabel").innerText = "修改学员";//拟态框的框框文案变化

    const id = e.target.dataset.id;//获取其id
    //通过id索要我们需要的学员信息
    const result = await axios({ url: "/student/one", params: { id } });
    // console.log(result);
    const obj = result.data.data
    //开门重置表单

    await porVil("/geo/province", {}, province, "省")
    province.value = obj.province
    await porVil("/geo/city", { pname: obj.province }, city, "市");
    await porVil("/geo/county", { pname: obj.province, cname: obj.city }, county, "县");
    // console.log(obj);
    for (const key in obj) {
      if (document.querySelector(`[name=${key}]`) && key !== "sex") {
        document.querySelector(`[name=${key}]`).value = obj[key]
      }
    };
    document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true
  };
});
